<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>BI Component - Orgnization Heirarchy</title>
    <link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/style_reset.css"/>
    <link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/comp_organization.css"/>
    <!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="../../theme/css/style-ie8.css"/><![endif]-->
    <!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="../../theme/css/style-ie9.css"/><![endif]-->
    <link rel="Stylesheet" type="text/css" href="../../api/js/skin-vista/ui.dynatree.css"/>

    <script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
    <script type="text/JavaScript" src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
    <script type="text/javascript" src="../../api/js/jquery.cookie.js"></script>
    <script type="text/JavaScript" src="../../<%=theme%>/script/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="../../api/js/jquery.dynatree.js"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

    <!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
    <script type="text/javascript">
        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            varname:"",
            value:undefined,
            values:undefined,
            height:"50%"
        };
        window.onload = function () {
            //sample registeration for an event
            //register listener function for an event
        }

        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            //example to set property values to dom elements
            refreshProperties();
            //load the tree
            user_org();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
        };
    </script>
    <script type="text/javascript">
        var selectedVariable = [];
        function user_org() {
            $(".hierarchy").dynatree({
                initAjax:{
                    url:"/sap/bc/bsp/sap/zbw_ac_db_test/hierarchy.json?hier_type=CC"
                },
               onActivate:function (node) {
                  getSelectedValues();
                },
                minExpandLevel:3,
                clickFolderMode:1,
                checkbox:false,
                selectMode:3,
                fx:{ height:"toggle", duration:500 },
                onPostInit:function (reloading, error) {
                    if (properties.value)
                        $(".hierarchy").dynatree("getTree").selectKey(properties.value);
                }
            });
        }
        $(document).ready(function () {
            user_org();
            var textbox = $(this);
            $('a.search').click(function () {
                var tree = $('.hierarchy').dynatree("getTree");
                var matches = [];
                var nodeKey = $('.search-text').val().toLowerCase();
                tree.visit(function (node) {
                    node.data.addClass = '';
                    if (node.data.title.toLowerCase().indexOf(nodeKey) > -1) {
                        node.makeVisible();
                        node.data.addClass = 'highlight';
                        matches.push(node);
                    }
                });
                if (node === null) {
                  //  alert("Not Found");
                     BOI.BOILib.Util.log('Not Found',true);
                }
                if (matches.length > 0) {
                    var node = matches[0];
                    current_match = 0;
                    var matchLi = node.li;
                    $('.dynatree-container').animate({
                        scrollTop:$(matchLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop()
                    }, 'slow');
                    tree.activateKey(node.data.key);
                    textbox.focus();
                }
            });
        });
        function getVnam() {
            vname = properties.varname ? properties.varname : properties.variable ? properties.variable.name : undefined;
            return vname;
        }
        function getSelectedValues() {
          //  var selKeys = $('.hierarchy').dynatree("getSelectedNodes");
             var selKeys = $('.hierarchy').dynatree("getActiveNode");
                selectedVariable[0] =selKeys.data.key;
                properties.value = selectedVariable;
                properties.values = selectedVariable;
        }
    </script>
</head>
<body>
<div class="org-menu">
    <div class="org-search">
        <p>
            Org Code:
            <input class="search-text" type="text" name="searchKey"/>
        </p>
        <a class="search">Search</a>
        <div class="clear"></div>
    </div>
    <div class="hierarchy">
    </div>
</div>
</body>